<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <style>
        html,body{
            padding: 0px;
            margin: 0px;
        }
        nav{
            text-align: center;
            height: 2rem;
            color: white;
            font-size: 2rem;
            line-height: 4rem;
            margin-bottom: 0.5rem!important;
        }
        select{
            border: 1px solid black;
            width: 40%;
            height: 2rem;
            font-size: 1.5rem;
        }
        .sel{
            display: flex;
            justify-content: space-around;
        }
        .h1{
            font-size: 1.8rem;
            font-weight: bold;
            margin: 0px;
        }
        .dis{
            display: flex;
            justify-content: center;
            padding: 0px 0.5rem;
        }
        .b button{
            width:33%;
            font-size: 1.5rem;
        }
        canvas{
            width: 100%;
        }
        .tb{
            text-align: center;
        }
        table td{
            padding: 2px!important;
            word-wrap: break-word;
            word-break: normal;
        }
    </style>
    <title>Document</title>
</head>
<body>
    <nav class="navbar navbar-inverse">
        结账数据信息查询系统 
    </nav>
    <main>
        <div class="dis">
            <span class="area_name h1"></span>：
            <span class="shop_name h1"></span>
        </div>
        <div class="sel">
            <select class="area" onchange="AreaChange(event)"></select>
            <select class="shops" onchange="ShopsChange(event)"></select>
        </div>
        <div class="btn-group b" role="group" aria-label="...">
            <button type="button" class="btn btn-default" onclick="kedanclick()">客单数量</button>
            <button type="button" class="btn btn-default" onclick="xsslclick()">销售数量</button>
            <button type="button" class="btn btn-default" onclick="xsjeclick()">销售金额</button>
            <button type="button" class="btn btn-default" onclick="pjeclick()">移动支付金额</button>
            <button type="button" class="btn btn-default" onclick="jjclick()">客单均价</button>
        </div>
          <!-- <div class="money_list"></div>   -->
        <canvas id="kedan" width="500" height="400"></canvas>
        <canvas id="xssl" width="500" height="400"></canvas>
        <canvas id="xsje" width="500" height="400"></canvas>
        <canvas id="pje" width="500" height="400"></canvas>
        <canvas id="jj" width="500" height="400"></canvas>
        <table class="table table-bordered tb">
            <thead>
                <tr>
                    <td>客单数量</td>
                    <td>销售数量</td>
                    <td>销售金额</td>
                    <td>手机支付金额</td>
                    <td>长短款</td>
                    <td>客单均价</td>
                    <td>支付时间</td>
                </tr>
            </thead>
            <tbody class="tbody">
                
            </tbody>
        </table>
    </main>
</body>
<script src="./jquery-3.2.1.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script src="./js/sChart.min.js"></script>
<script src="./js/index.js"></script>
</html>